<script setup lang="ts">
import { ref, onMounted } from "vue";
// import ReCol from "@/components/ReCol";
// import { formRules } from "./utils/rule";
import { MenuFormProps } from "./utils/types";

const props = withDefaults(defineProps<MenuFormProps>(), {
  formInline: () => ({
    distributionMenuList: [],
    readyDistributionMenuList: []
  })
});

const menuRuleFormRef = ref();
// const select;
// const { switchStyle } = usePublicHooks();
const newFormInline = ref(props.formInline);

function getRef() {
  return menuRuleFormRef.value;
}

const defaultProps = {
  children: "children",
  label: "title"
};

onMounted(() => {
  menuRuleFormRef.value.setCheckedKeys(
    newFormInline.value.readyDistributionMenuList
  );
});

defineExpose({ getRef });
</script>

<template>
  <div class="container">
    <el-tree
      ref="menuRuleFormRef"
      :data="newFormInline.distributionMenuList"
      show-checkbox
      node-key="id"
      :props="defaultProps"
      default-expand-all
    />
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;

  /* display: flex;
  align-items: center;
  justify-content: center; */
}
</style>
